<template>
<div>
<button type="submit" @click="show=true">Go</button>

<van-popup v-model="show" class="bootn_pop" round  closeable @close="goto"	:overlay='false'>
<img src="../assets/img/zp.jpg" class="bootn_pop_img" >

</van-popup>
</div>
</template>
<script>
export default {

    data() {
      return {
     show:false,

      };
    },
   
    created() {
      
    },
    mounted() {
     $(document).ready(() => {
  let $button = $('button[type="submit"]');

  $button.on('click', function () {
    var $this = $(this);
    if ($this.hasClass('active') || $this.hasClass('success')) {
      return false;
    }
    $this.addClass('active');
    setTimeout(() => {
      $this.addClass('loader');
    }, 125);
    setTimeout(() => {
      $this.removeClass('loader active');
      $this.text('小黑不怕黑');
      $this.addClass('success animated pulse');
    }, 1600);
    setTimeout(() => {
      $this.text('Go');
      $this.removeClass('success animated pulse');
      $this.blur();
    }, 2900);
  });
});

    },
    

    methods:{
  goto(){{
    this.show=false
    this.$emit('xqnum', 2)
  }}
    },
}
</script>





<style scoped lang="scss">
html,
body {
  margin: 0;
  padding: 0;
}

button[type=submit], body {
  display: flex;
  justify-content: center;
  align-items: center;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "Assistant", sans-serif;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #DAEBEE;
  background-size: 20px 20px;
}

button[type=submit] {
  width: 100px;
  height: 50px;
  margin: auto;
  margin-top:20px ;
  background: transparent;
  border-radius: 10px;
  will-change: transform;
  transition: all 0.2s ease;
  border: 2px solid #FF5126;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  color: #FF5126;
  outline: none;
  text-align: center;
}
button[type=submit]:hover {
  background: #FF5126;
  color: #ffffff;
}
button[type=submit]:active {
  font-size: 15px;
  transform: translateY(1px);
}
button[type=submit].active {
  font-size: 0;
  border-radius: 25px;
  width: 50px;
  background: transparent;
}
button[type=submit].loader {
  border-right: 2px solid #ffffff;
  -webkit-animation: loader 0.4s linear infinite;
          animation: loader 0.4s linear infinite;
}
button[type=submit].success {
  background: #e83e8c;
  border-color: #e83e8c;
  font-size: 14px;
  color: #ffffff;
}

@-webkit-keyframes loader {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes loader {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.bootn_pop{
 width: 80%;
//  height: 200px;
 background: #efefef;
 overflow: hidden;
 .bootn_pop_img{
    width: 100%;
 }
}
</style>
